<!-- 官网 -->
<template>
    <div id="index">
        <header>
            <div class="top">
                <div id="logo">
                    <img v-if="logoUrl == ''" src="../assets/logo.png" alt="LOGO">
                    <img v-else :src="logoUrl" alt="LOGO">
                </div>
                <div class="nav">
                    <!-- <div class="navItem" @click="changeHash('#marketAnalysis')">
                        市场分析
                    </div> -->
                    <div class="navItem" @click="changeHash('#productPresentation')">
                        产品介绍
                    </div>
                    <!-- <div class="navItem" @click="changeHash('#productApplication')">
                        产品应用
                    </div>
                    <div class="navItem" @click="changeHash('#case')">
                        节税案例
                    </div>
                    <div class="navItem" @click="changeHash('#flow')">
                        合作流程
                    </div>
                    <div class="navItem" @click="changeHash('#advantage')">
                        平台优势
                    </div> -->
                    <div class="navItem" @click="changeHash('#aboutUs')">
                        关于我们
                    </div>
                    <div class="navItem" ></div>
                    <div class="navItem" ></div>
                    <div class="navItem" ></div>
                    <div class="navItem" ></div>
                    <div class="navItem" ></div>
                </div>
            </div>
            <div class="banner">
                <el-carousel trigger="click" v-if="bannerList.length == 0">
                    <el-carousel-item v-for="item in 4" :key="item">
                        <img src="../assets/index/banner.jpeg" alt="">
                    </el-carousel-item>
                </el-carousel>
                <el-carousel trigger="click" v-else>
                    <el-carousel-item v-for="item in bannerList" :key="item.id">
                        <img :src="item.picPath" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </header>

        <!-- 市场分析 -->
        <div id="marketAnalysis" v-if="false">
            <div class="title">
                <div><span></span><i></i><h5>市场分析</h5><i></i><span></span></div>
                <span>MARKET ANALYSLS</span>
            </div>
            <div class="content">
                <div class="flex jusBetween">
                    <div class="marketItem1 boxShadow">
                        <div class="headTit">{{name}}开启灵活用工新时代<span></span></div>
                        <div class="marketDesc">
                            <span>General secretary Xi Jinping said</span>
                            <h6>习近平总书记说</h6>
                        </div>
                        <div class="flex">
                            <div class="mesIcon"></div>
                            <div class="marketMes borderBtmE9">
                                <div>
                                    <img src="../assets/index/mark1.png" alt="">
                                </div>
                                <p>⼈有恒业，方能有恒⼼。⼀个⼈有了就业，就容易安定；⼀个家庭有⼀⼈就业就增加⼀分稳定的⼒量。就业是最⼤的⺠⽣，是最⼤的⺠⽣⼯程、⺠⼼⼯程、根基⼯程。</p>
                                <div class="flex flexRight">
                                    <img src="../assets/index/mark2.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="marketDesc">
                            <span>Premier Li Keqiang stressed</span>
                            <h6>李克强总理强调</h6>
                        </div>
                        <div class="flex">
                            <div class="mesIcon"></div>
                            <div class="marketMes">
                                <div>
                                    <img src="../assets/index/mark1.png" alt="">
                                </div>
                                <p>李克强总理主持召开国务院常务会议强调，各地要着眼稳就业⼤局，出台更多⽀持新增就业岗位的措施，抓紧清理取消不合理限制灵活就业的规定。</p>
                                <div class="flex flexRight">
                                    <img src="../assets/index/mark2.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="marketItem1 boxShadow">
                        <div class="headTit">各⼤型企业已经开始用⼯模式改⾰<span></span></div>
                        <div class="flex alignCenter ">
                            <div class="mesIcon"></div>
                            <div style="flex:1" class="borderBtmE9">
                                <p>中国移动《关于开展综合⽹格离职承包事前⼯作的通知》</p>
                            </div>
                        </div>
                        <div class="flex alignCenter ">
                            <div class="mesIcon"></div>
                            <div style="flex:1">
                                <p>中国联通深入推进全生产场景规划小承包改革，搭建内部“双创平台”</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex jusBetween">
                    <div class="marketItem2 boxShadow">
                        <div class="headTit">传统模式流程<span></span></div>
                        <img src="../assets/index/market1.png" alt="">
                    </div>
                    <div class="marketItem2 boxShadow">
                        <div class="headTit">传统模式流程<span></span></div>
                        <div class="flex alignCenter ">
                            <div class="mesIcon"></div>
                            <div style="flex:1" class="borderBtmE9 padding20">
                                <p>支付个人费用:企业替个人代扣代缴个人所得税，不仅税负高，企业更无法获得进项发票。</p>
                            </div>
                        </div>
                        <div class="flex alignCenter ">
                            <div class="mesIcon"></div>
                            <div style="flex:1" class="padding20">
                                <p>线上或者线下各类行业都具有这种劳务模式，如:物流制造，连锁⻔店，教育行业等。涉及到人群包括，推广员 家政，主播，项目陪练等。</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="marketItem3 padding20">
                    <div class="headTit">传统模式下的痛点<span></span></div>
                    <div class="flex alignCenter padding20">
                        <div class="flex1">
                            <div class="flex padding20">
                                <div class="titIcon">
                                    <img src="../assets/index/titIcon1.png" alt="">
                                </div>
                                <div class="flex1">
                                    <h5>税负成本高</h5>
                                    <p>企业承担自由职业者赋税 无进项发票无抵扣</p>
                                </div>
                            </div>
                            <div class="flex padding20">
                                <div class="titIcon">
                                    <img src="../assets/index/titIcon2.png" alt="">
                                </div>
                                <div class="flex1">
                                    <h5>资金下发不灵活</h5>
                                    <p>银行卡难以管理 到账周期⻓，打款有手续费日薪，周薪容易发错</p>
                                </div>
                            </div>
                        </div>
                        <!-- <img class="marketItem3Img" src="../assets/index/market2.png" alt=""> -->
                        <div class="marketItem3Img">
                            <img class="transMarketImg" src="../assets/index/market2.png" alt="">
                            <div>
                                <span>企业</span>
                                <span>痛点</span>
                            </div>
                        </div>
                        <div></div>
                        <div class="flex1">
                            <div class="flex padding20">
                                <div class="titIcon">
                                    <img src="../assets/index/titIcon3.png" alt="">
                                </div>
                                <div class="flex1">
                                    <h5>税务稽查风险</h5>
                                    <p>违规购买发票 未按规定代扣代缴 三流不合一 虚开发票</p>
                                </div>
                            </div>
                            <div class="flex padding20">
                                <div class="titIcon">
                                    <img src="../assets/index/titIcon4.png" alt="">
                                </div>
                                <div class="flex1">
                                    <h5>资金不安全</h5>
                                    <p>个人卡打款 资金不安全</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            
        <!-- 产品介绍 -->
        <div id="productPresentation" v-if="false">
            <div class="title title1">
                <div class="titleItem"><span></span><i></i><h5>产品介绍</h5><i></i><span></span></div>
                <span>PRODUCT INTRODUCTION</span>
            </div>
            <div class="content">
                <div class="productTab">
                    <div class="proTabItem isProActive" @click="selItem('.proTabItem','isProActive','1','productIndex')">产品介绍</div>
                    <div class="proTabItem" @click="selItem('.proTabItem','isProActive','2','productIndex')">产品优势</div>
                    <div class="proTabItem" @click="selItem('.proTabItem','isProActive','3','productIndex')">业务方案</div>
                    <div class="proTabItem" @click="selItem('.proTabItem','isProActive','4','productIndex')">业务流程</div>
                </div>
                <div class="proTabItem1" v-if="productIndex == '1'">
                    <div class="proTabItem1Top">
                        {{name}}是由上海戈金建筑工程有限公司推出的一款适应共享经济用工模式的服务平台，集合共享用工众包+资金结算+委托代征+核定个税等功能，解决企业客户资金下发效率低、用工成本高、国家税收盲区的平台产品。通过“互联网+ 税筹”的方式实现企业、自由职业者、税务监管部⻔的互联互通，完成企业合规经营、个人依法纳税、 政府增加税收的 多方共赢目标。
                    </div>
                    <div class="proTabItem1Btm">
                        <div class="flex alignCenter">
                            <div class="proTabItem1Bg">
                                <span>众用</span>
                                <span>外包</span>
                            </div>
                            <img class="proTabItem1Fg" src="../assets/index/proItem1fenge.png" alt="">
                            <div class="proTabItem1Bg">
                                <span>资金</span>
                                <span>结算</span>
                            </div>
                        </div>
                        <div class="proTabItem1BtmFenge flex jusBetween">
                            <div></div>
                            <div></div>
                        </div>
                        <div class="flex alignCenter">
                            <div class="proTabItem1Bg">
                                <span>委托</span>
                                <span>代理</span>
                            </div>
                            <img class="proTabItem1Fg" src="../assets/index/proItem1fenge.png" alt="">
                            <div class="proTabItem1Bg">
                                <span>核定</span>
                                <span>个税</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="proTabItem2 flex justifyCenter alignCenter" v-if="productIndex == '2'">
                    <div class="protabItem2Left">
                        <div class="flex alignCenter">
                            <div class="right">
                                <h6 class="theme">全额应税</h6>
                                <p class="color666">提供个税完税凭证，全额按核定政策应税，支持审计穿行测试</p>
                            </div>
                            <img src="../assets/index/prosuperIcon1.png" alt="">
                        </div>
                        <div class="flex alignCenter">
                            <div class="right">
                                <h6 class="theme">委托代征</h6>
                                <p class="color666">平台具备独立合法的委托提供垫资服务</p>
                            </div>
                            <img src="../assets/index/prosuperIcon2.png" alt="">
                        </div>
                        <div class="flex alignCenter">
                            <div class="right">
                                <h6 class="theme">垫资服务</h6>
                                <p class="color666">平台为特定场景下的企业，提供垫资服务</p>
                            </div>
                            <img src="../assets/index/prosuperIcon3.png" alt="">
                        </div>
                    </div>
                    <div class="proTabItem2Cent flex justifyCenter alignCenter">
                        <i>
                            <strong></strong>
                            <strong></strong>
                            <strong></strong>
                            <strong></strong>
                            <strong></strong>
                            <strong></strong>
                        </i>
                        <div class="proTabItem2CentC flex column justifyCenter alignCenter">
                            <span>产品</span>
                            <span>优势</span>
                        </div>
                    </div>
                    <div class="protabItem2Right">
                        <div class="flex alignCenter">
                            <img src="../assets/index/prosuperIcon4.png" alt="">
                            <div class="left">
                                <h6 class="theme">资金安全</h6>
                                <p class="color666">提国资平台，人行资金监管有效保证商户资金安全</p>
                            </div>
                        </div>
                        <div class="flex alignCenter">
                            <img src="../assets/index/prosuperIcon5.png" alt="">
                            <div class="left">
                                <h6 class="theme">秒级到账</h6>
                                <p class="color666">企业随充随付，秒级到账</p>
                            </div>
                        </div>
                        <div class="flex alignCenter">
                            <img src="../assets/index/prosuperIcon6.png" alt="">
                            <div class="left">
                                <h6 class="theme">简单便捷</h6>
                                <p class="color666">自由职业者无需办理工商注册</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="proTabItem3" v-if="productIndex == '3'">
                    <div class="proTabItem3Top">
                        <div>
                            <span>企业</span>
                            <span>客户</span>
                        </div>
                        <div>
                            <div class="flex column alignCenter justifyCenter relative">
                                <i class="proTI">业务总包协议</i>
                                <div class="proToRight proDashed">
                                </div>
                            </div>
                            <div class="flex column alignCenter justifyCenter relative">
                                <div class="proToLeft proDashed">
                                </div>
                                <i class="proBI">开具服务费专/普发票</i>
                            </div>
                            <div class="flex column alignCenter justifyCenter relative">
                                <div class="proToRight proSolid">
                                </div>
                                <i class="proBI">总包服务费</i>
                            </div>
                        </div>
                        <div>
                            <span>{{name}}</span>
                        </div>
                        <div>
                            <div class="flex column alignCenter justifyCenter relative">
                                <i class="proTI">服务协议</i>
                                <div class="proToRight proDashed">
                                </div>
                            </div>
                            <div class="flex column alignCenter justifyCenter relative">
                                <div class="proToRight proDashed">
                                </div>
                                <i class="proBI">代征个人所得税</i>
                            </div>
                            <div class="flex column alignCenter justifyCenter relative">
                                <div class="proToRight proSolid">
                                </div>
                                <i class="proBI">个人服务费</i>
                            </div>
                        </div>
                        <div>
                            <span>自由</span>
                            <span>职业者</span>
                        </div>
                    </div>
                    <div class="proTabItem3Btm">
                        <div class="flex alignCenter">
                            <div class="mesIcon1"></div>
                            <span>上海戈金以服务外包的模式将共享经济平台的自由用工需求总体承接下来。</span>
                        </div>
                        <div class="flex alignCenter">
                            <div class="mesIcon1"></div>
                            <span>由上海戈金为共享经济平台寻找，招募，管理合适的个人服务分包商。</span>
                        </div>
                        <div class="flex alignCenter">
                            <div class="mesIcon1"></div>
                            <span>上海戈金与个人签署经济服务合作协议，约定个人作为上海戈金(共享经济平台)的服务分包商之一为需方提供具体的服务， 并由上海戈金为个人结算服务报酬，且个人委托上海戈金代其完成涉税相关的工作。</span>
                        </div>
                    </div>
                </div>
                <div class="proTabItem4" v-if="productIndex == '4'">
                    <img src="../assets/index/businessProcess.png" alt="">
                </div>
            </div>
            <div class="bowen">
                <img src="../assets/index/bowen1.png" alt="">
            </div>
            <div class="bowen1">
                <img src="../assets/index/bowen2.png" alt="">
            </div>
        </div>
            
        <!-- 产品应用 -->
        <div id="productApplication" v-if="false">
            <div class="title">
                <div><span></span><i></i><h5>产品应用</h5><i></i><span></span></div>
                <span>MARKET ANALYSIS</span>
            </div>
            <div class="content">
                <div class="flex">
                    <div class="tab">
                        <div class="tabItem applicationTab isActive" @click="selItem('.applicationTab','isActive','1','proAplIndex')">使用场景</div>
                        <div class="tabItem applicationTab" @click="selItem('.applicationTab','isActive','2','proAplIndex')">政策依据</div>
                        <div class="tabItem applicationTab" @click="selItem('.applicationTab','isActive','3','proAplIndex')">完税凭证</div>
                    </div>
                </div>
                <div class="boxShadow proAltItem1" v-if="proAplIndex == '1'">
                    <div class="flex alignCenter margin20">
                        <div class="mesIcon"></div>
                        <div class="flex1">
                            <h6>个人生产经营活动</h6>
                            <span>个人生产经营活动是指个体工商业者围绕产品或者服务所开展的一系列活动的总称。按照国务院的指导精神，月收入超过10万的生产经营活动一般定义为有规模、非临时性的活动，因此上海戈金将个体工商业者 “月收入不超过10万” 作为认定是否属于从事个人生产经营活动的重要标准。</span>
                        </div>
                    </div>
                    <div class="flex alignCenter margin20">
                        <div class="mesIcon"></div>
                        <div class="flex1"><h6>核心特征:小额、零星、不固定</h6></div>
                    </div>
                    <div class="flex alignCenter justifyCenter proAltItem1Hx">
                        <div class="flex alignCenter column">
                            <span>无劳动/劳务关系</span>
                            <span>通过网络平台完成</span>
                            <span>通过网络平台完成</span>
                        </div>
                        <img src="../assets/index/appPersion.png" alt="">
                        <div class="flex alignCenter column">
                            <span>有自我雇佣的特点</span>
                            <span>收入不稳定，需要自负盈亏</span>
                            <span>有明确的生产经营成本</span>
                        </div>
                    </div>
                    <div class="flex jusBetween">
                        <div>
                            <div class="flex alignCenter margin20">
                                <div class="mesIcon"></div>
                                <h6>平台型（自由职业者）</h6>
                            </div>
                            <div class="flex alignCenter proAltItem1PT">
                                <div><div @mouseenter="proAppHover($event,'健身教练')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app1.png" alt=""></div></div>
                                <div class="flex column">
                                    <div @mouseenter="proAppHover($event,'司机')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app2.png" alt=""></div>
                                    <div @mouseenter="proAppHover($event,'美业')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app3.png" alt=""></div>
                                </div>
                                <div><div @mouseenter="proAppHover($event,'保安')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app4.png" alt=""></div></div>
                                <div class="flex column">
                                    <div @mouseenter="proAppHover($event,'设计师')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app5.png" alt=""></div>
                                    <div @mouseenter="proAppHover($event,'保洁')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app6.png" alt=""></div>
                                </div>
                                <div><div @mouseenter="proAppHover($event,'主播')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app7.png" alt=""></div></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex alignCenter margin20">
                                <div class="mesIcon"></div>
                                <h6>销售类及服务类</h6>
                            </div>
                            <div class="flex alignCenter proAltItem1PT">
                                <div><div @mouseenter="proAppHover($event,'兼职销售','人员')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app8.png" alt=""></div></div>
                                <div class="flex column">
                                    <div @mouseenter="proAppHover($event,'经济人员')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app9.png" alt=""></div>
                                    <div @mouseenter="proAppHover($event,'代理人员','[微商]')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app10.png" alt=""></div>
                                </div>
                                <div><div @mouseenter="proAppHover($event,'代理人员','[销售代理]')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app11.png" alt=""></div></div>
                                <div class="flex column">
                                    <div @mouseenter="proAppHover($event,'顾问')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app12.png" alt=""></div>
                                    <div @mouseenter="proAppHover($event,'代理人员','[经纪人]')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app13.png" alt=""></div>
                                </div>
                                <div><div @mouseenter="proAppHover($event,'咨询')" @mouseleave="proAppLeave($event)"><img src="../assets/index/proApplication/app14.png" alt=""></div></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="boxShadow proAltItem2 margin20" v-if="proAplIndex == '2'">
                    <div class="headTit">个人视同为个体工商户政策<span></span></div>
                    <div class="flex">
                        <div class="mesIcon2 margin20"></div>
                        <div class="flex1 borderBtmE9">
                            <h5>个体工商户个人所得税计税办法(2018年修订)第三条</h5>
                            <span>本办法所称个体工商户包括:(一)依法取得个体商户营业执照，从事 生产经营的个体工商户;(二)经政府有关部⻔批准，从事办学、医疗、 咨询等有偿服务活动的个人; (三)其他从事个体生产，经营的个人。</span>
                        </div>
                    </div>
                    <div class="headTit margin20">个人经营性所得政策<span></span></div>
                    <div class="flex">
                        <div class="mesIcon2 margin20"></div>
                        <div class="flex1 borderBtmE9">
                            <h5>中华人⺠共和国个人所得税法实施条例第六条(2018)</h5>
                            <span>经营所得是指:1.个体工商户从事生产、经营活动取得的所得， 个人独资企业投资人、合伙企业的个人合伙人来源于境内注册 的个人独资企业、合伙企业生产、经营的所得;2.个人依法从 事办学、医疗、咨询以及其他有偿服务活动取得的所得; 3.个 人对企业、事业单位承包经营、承租经营以及转包、转租取得 的所得; 4.个人从事其他生产、经营活动取得的所得。</span>
                        </div>
                    </div>
                    <div class="headTit margin20">核定征收政策<span></span></div>
                    <div class="flex">
                        <div class="mesIcon2 margin20"></div>
                        <div class="flex1 borderBtmE9">
                            <h5>《中华人⺠共和国税收征收管理法(2015修订)》第三十七条</h5>
                            <span>对未按照规定办理税务登记的从事生产、经营的纳税人以及临时从事经 营的纳税人， 由税务机关核定其应纳税额。</span>
                        </div>
                    </div>
                    <div class="flex margin20">
                        <div class="mesIcon2 margin20"></div>
                        <div class="flex1 borderBtmE9">
                            <h5>《中华人⺠共和国税收征收管理法(2015修订)》第三十五条</h5>
                            <span>纳税人有下列情形之一的，税务机关有权核定其应纳税额:(一)依照 法律、行政法规的规定可以不设置账薄的;(二)依照法律、行政法 规的规定应当设置账簿但未设置的;(三)擅自销毁账簿或者拒不提 供纳税资料的;四)虽设置账簿，但账目混乱或者成本资料、收入凭 证、费用凭证残缺不全，难以查账的;(五)发生纳税义务，未按照 规定的期限办理纳税申报，经税务机关责令限期申报，逾期仍不申报 的;(六)纳税人申报的计税依据明显偏低，又无正当理由的。税务 机关核定应纳税额的具体程序和方法由国务院税务主管部⻔规定。</span>
                        </div>
                    </div>
                    <div class="flex margin20">
                        <div class="mesIcon2 margin20"></div>
                        <div class="flex1 borderBtmE9">
                            <h5>《个体工商户税收定期定额征收管理办法》第二条</h5>
                            <span>本办法所称个体商户税收定期定额征收，是指税务机关依照法律、行 政法规及本办法的规定，对个体工商户在一定经营地点、一定经营时 期、一定经营范围内的应纳税经营额(包括经营数量)或所得额(以 下简称定额)进行核定，并以此为计税依据，确定其应纳税额的一种征 收方式。</span>
                        </div>
                    </div>
                </div>
                <div class="boxShadow proAltItem3 margin20" v-if="proAplIndex == '3'">
                    <div class="flex margin20">
                        <div class="headTit flex1">个人所得税“经营所得”完税证明<span></span></div>
                        <div class="headTit flex1">个人经营委托代征纳税记录<span></span></div>
                    </div>
                    <img src="../assets/index/application1.png" alt="">
                    <div>
                        <span>配合出具合规完税凭证，支持审计穿行测试</span>
                        <span>配合上市公司准备核查，服务多家上市公司</span>
                    </div>
                </div>
            </div>
        </div>
            
        <!-- 节税案例 -->
        <div id="case" v-if="false">
            <div class="title">
                <div><span></span><i></i><h5>节税案例</h5><i></i><span></span></div>
                <span>TAX SAVING CASES</span>
            </div>
            <div class="content">
                <div class="flex alignCenter justifyCenter caseCont">
                    <div class="relative">
                        <img src="../assets/index/case/case1.png" alt="">
                        <div>
                            <span>发放资金</span>
                            <i>100万</i>
                        </div>
                    </div>
                    <img src="../assets/index/case/case.png" alt="">
                    <div class="relative">
                        <img src="../assets/index/case/case2.png" alt="">
                        <div>
                            <span>费用支出</span>
                            <i>8.5服务费支出</i>
                            <i>(含6%增值发税专用票)</i>
                        </div>
                    </div>
                    <img src="../assets/index/case/case.png" alt="">
                    <div class="relative">
                        <img src="../assets/index/case/case3.png" alt="">
                        <div>
                            <span>总支出</span>
                            <i>108.5万</i>
                        </div>
                    </div>
                    <img src="../assets/index/case/case.png" alt="">
                    <div class="relative">
                        <img src="../assets/index/case/case4.png" alt="">
                        <div>
                            <span>企业成本</span>
                            <i>102.36万（抵扣后）</i>
                        </div>
                    </div>
                    <img src="../assets/index/case/case.png" alt="">
                    <div class="relative">
                        <img src="../assets/index/case/case5.png" alt="">
                        <div>
                            <span>个人成本</span>
                            <i>0</i>
                        </div>
                    </div>
                    <img src="../assets/index/case/case.png" alt="">
                    <div class="relative">
                        <img src="../assets/index/case/case6.png" alt="">
                        <div>
                            <span>说明</span>
                            <i>企业发票合规</i>
                            <i>个人依法纳税</i>
                        </div>
                    </div>
                </div>
                <div class="flex caseCont2">
                    <div class="flex1">
                        <div class="flex alignCenter">
                            <div class="titIcon">
                                <img src="../assets/index/case/case7.png" alt="">
                            </div>
                            <div>
                                <h6>税优付服务费</h6>
                                <span class="theme">100万元x8.5%=8.5万元</span>
                            </div>
                        </div>
                        <div class="flex alignCenter">
                            <div class="titIcon">
                                <img src="../assets/index/case/case8.png" alt="">
                            </div>
                            <div>
                                <h6>增值税专用发票抵扣</h6>
                                <span class="theme">108.5万元 / 1.06 x 6% = 6.14 万元</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex1">
                        <div class="flex alignCenter">
                            <div class="titIcon">
                                <img src="../assets/index/case/case9.png" alt="">
                            </div>
                            <div>
                                <h6>客户实际支出成本</h6>
                                <span class="theme">8.5 万元 - 6.14 万元 = 2.36 万元</span>
                            </div>
                        </div>
                        <div class="flex alignCenter">
                            <div class="titIcon">
                                <img src="../assets/index/case/case10.png" alt="">
                            </div>
                            <div>
                                <h6>客户实际支出比例</h6>
                                <span class="theme">2.3 6 万元 / 100 万元 x 100% = 2.36%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            
        <!-- 合作流程 -->
        <div id="flow" v-if="false">
            <div class="title">
                <div><span></span><i></i><h5>合作流程</h5><i></i><span></span></div>
                <span>COOPERATION PROCESS</span>
            </div>
            <div class="content">
                <div class="flowContItem1 borderBtmE9">
                    <h5>企业平台合作流程</h5>
                    <div class="flex alignCenter">
                        <div class="flex column justifyCenter alignCenter">
                            <span>企业</span>
                            <span>平台</span>
                        </div>
                        <img src="../assets/index/case/case.png" alt="">
                        <div class="flex column justifyCenter alignCenter">
                            <span>入驻</span>
                            <span>审核</span>
                            <div>
                                <i>提供风控材料</i>
                            </div>
                        </div>
                        <img src="../assets/index/case/case.png" alt="">
                        <div class="flex column justifyCenter alignCenter">
                            <span>签约</span>
                            <div>
                                <i>与上海戈金签订服务协议</i>
                            </div>
                        </div>
                        <img src="../assets/index/case/case.png" alt="">
                        <div class="flex column justifyCenter alignCenter">
                            <span>开户</span>
                            <div>
                                <i>开通专属商户</i>
                            </div>
                        </div>
                        <img src="../assets/index/case/case.png" alt="">
                        <div class="flex column justifyCenter alignCenter">
                            <span>接受</span>
                            <span>服务</span>
                            <div>
                                <i>接受上海戈金基于企业的业务需求所提供的共享经济综合服务</i>
                            </div>
                        </div>
                        <img src="../assets/index/case/case.png" alt="">
                        <div class="flex column justifyCenter alignCenter">
                            <span>付款</span>
                            <div>
                                <i>充值服务费至专属商户</i>
                            </div>
                        </div>
                        <img src="../assets/index/case/case.png" alt="">
                        <div class="flex column justifyCenter alignCenter">
                            <span>开票</span>
                            <div>
                                <i>获得发票</i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flowContItem1">
                    <h5>个体工商业者合作流程</h5>
                    <div class="flex alignCenter">
                        <div class="flex column justifyCenter alignCenter">
                            <span>个体工</span>
                            <span>商业者</span>
                        </div>
                        <img src="../assets/index/flow.png" alt="">
                        <div class="flex column justifyCenter alignCenter">
                            <span>签约</span>
                            <div>
                                <i>与{{name}}签订合作协议</i>
                                <i style="color:#E02020">(支持电子签约)</i>
                            </div>
                        </div>
                        <img src="../assets/index/flow.png" alt="">
                        <div class="flex column justifyCenter alignCenter">
                            <span>承揽</span>
                            <span>任务</span>
                            <div>
                                <i>承揽并完成任务</i>
                            </div>
                        </div>
                        <img src="../assets/index/flow.png" alt="">
                        <div class="flex column justifyCenter alignCenter">
                            <span>收入</span>
                            <div>
                                <i>获得收入</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            
        <!-- 平台优势 -->
        <div id="advantage" v-if="false">
            <div class="title">
                <div><span></span><i></i><h5>平台优势</h5><i></i><span></span></div>
                <span>PLATFORM ADVANTAGES</span>
            </div>
            <div class="content">
                <div class="flex">
                    <div class="tab">
                        <div class="tabItem advantageTab isActive" @click="selItem('.advantageTab','isActive','1','advantageIndex')">平台优势</div>
                        <div class="tabItem advantageTab" @click="selItem('.advantageTab','isActive','2','advantageIndex')">资金监管</div>
                        <div class="tabItem advantageTab" @click="selItem('.advantageTab','isActive','3','advantageIndex')">风险控制</div>
                        <div class="tabItem advantageTab" @click="selItem('.advantageTab','isActive','4','advantageIndex')">系统高效稳定</div>
                        <div class="tabItem advantageTab" @click="selItem('.advantageTab','isActive','5','advantageIndex')">高安全性</div>
                    </div>
                </div>
                <div class="advantageItem1 flex" v-if="advantageIndex == '1'">
                    <div>
                        <div class="flex">
                            <div class="titIcon">
                                <img src="../assets/index/advantage/advantage1.png" alt="">
                            </div>
                            <div>
                                <h6>充值自动入账</h6>
                                <span>客户打款后，系统自动入账至商户</span>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="titIcon">
                                <img src="../assets/index/advantage/advantage2.png" alt="">
                            </div>
                            <div>
                                <h6>实时到账</h6>
                                <span>7*24小时接收付款申请， 实时到账</span>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="titIcon">
                                <img src="../assets/index/advantage/advantage3.png" alt="">
                            </div>
                            <div>
                                <h6>通道稳定</h6>
                                <span>直联多家银行，保障业务高效稳定</span>
                            </div>
                        </div>
                    </div>
                    <img src="../assets/index/advantage/advantage.png" alt="">
                    <div>
                        <div class="flex">
                            <div class="titIcon">
                                <img src="../assets/index/advantage/advantage4.png" alt="">
                            </div>
                            <div>
                                <h6>发票线上申请</h6>
                                <span>随付随申请，开票记录清晰明了</span>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="titIcon">
                                <img src="../assets/index/advantage/advantage5.png" alt="">
                            </div>
                            <div>
                                <h6>API 技术对接</h6>
                                <span>支持与客户系统无缝 对接，实现自由职业者实时提现</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="advantageItem2" v-if="advantageIndex == '2'">
                    <div class="flex alignCenter advantageItem2Itm">
                        <div>
                            <span>企业</span>
                            <span>客户</span>
                        </div>
                        <div></div>
                        <i>资金转账</i>
                        <div></div>
                        <div>
                            <span>银行</span>
                            <span>监管</span>
                        </div>
                        <div></div>
                        <i>费用支付</i>
                        <div></div>
                        <div>
                            <span>自由</span>
                            <span>职业者</span>
                        </div>
                    </div>
                    <div class="flex alignCenter margin20">
                        <div class="mesIcon"></div>
                        <p>为客户在合作银行开立账户，客户可向该账户直接充值。客户，银行和明薪签署三方监管协议。</p>
                    </div>
                    <div class="flex alignCenter margin20">
                        <div class="mesIcon"></div>
                        <p>为客户在合作银行开立账户，客户可向该账户直接充值。客户，银行和明薪签署三方监管协议。</p>
                    </div>
                    <div class="flex alignCenter justifyCenter padding20">
                        <i style="margin:0 30px">银行背书</i>
                        <i style="margin:0 30px">资金安全</i>
                        <i style="margin:0 30px">方便快捷</i>
                    </div>
                </div>
                <div class="advantageItem3" v-if="advantageIndex == '3'">
                    <div>
                        <span>入网风控</span>
                        <div>
                            <p>新商户提供完整的企业资质信息及业务场景说明信息。</p>
                        </div>
                    </div>
                    <div>
                        <span>交易风控</span>
                        <div>
                            <p>交易风控系统，实时监控每笔交易，实时拦截风险交易。</p>
                        </div>
                    </div>
                    <div>
                        <span>商户巡检</span>
                        <div>
                            <p>每月对商户进行交易巡查，持续保证业务合规</p>
                        </div>
                    </div>
                </div>
                <div class="advantageItem3" v-if="advantageIndex == '4'">
                    <div>
                        <span>稳定</span>
                        <div>
                            <p>1、微服务架构，应用高可用集群。</p>
                            <p>2、实时增量异地备份数据，定期容灾演习。</p>
                            <p>3、对接多家银行，确保资金随时可以正常下发。</p>
                        </div>
                    </div>
                    <div>
                        <span>高效</span>
                        <div>
                            <p>1、付款到银行卡2分钟内到账。</p>
                            <p>2、网银转账充值，30分钟内到账，到账后可直接发起付款。</p>
                        </div>
                    </div>
                    <div>
                        <span>强大</span>
                        <div>
                            <p>1、SaaS商户综合服务平台，轻松在线下发。</p>
                            <p>2、支持API系统对接，覆盖所有业务场景。</p>
                            <p>3、提供多语言的SDK工具包，方便企业快速对接。</p>
                        </div>
                    </div>
                </div>
                <div class="advantageItem3" v-if="advantageIndex == '5'">
                    <div>
                        <span>系统安全</span>
                        <div>
                            <p>1、国内一流的防火墙，保证系统的网络安全。</p>
                            <p>2、定期执行安全漏洞及病毒扫描，及时规避安全风险。</p>
                        </div>
                    </div>
                    <div>
                        <span>数据安全</span>
                        <div>
                            <p>1、全站HTTPS访问，确保数据传输过程安全。</p>
                            <p>2、敏感数据加密存储，符合PCI DSS认证标准。</p>
                        </div>
                    </div>
                    <div>
                        <span>操作安全</span>
                        <div>
                            <p>1、支持制单、符合流程，守好企业出款的最后一道关卡。</p>
                            <p>2、商户在线服务平台支持微信扫码登录方式，重要操作需短信验证。</p>
                            <p>3、接口交互支持RSA2048位的非对称秘钥，安全放篡改。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 产品中心 -->
        <div id="productPresentation">
            <div class="title">
                <div><span></span><i></i><h5>产品介绍</h5><i></i><span></span></div>
            </div>
            <div class="flex content">
                <div class="flex column flex1" style="padding:20px 20px;font-weight:500;line-height:30px;background: #F5F5F5;margin: 35px 20px 0 0px">
                        <div class="flex  column flex1">
                            <div class="mesIconP">项目管理</div>
                            <span class="flex1">企业通过系统，直接发包项目，分享二维码给到包工头邀请加入同时可上传表格智能匹配人员</span>
                        </div>
                        <div class="flex  column flex1">
                            <div class="mesIconP">结算管理</div>
                            <span class="flex1">与招商银行实现银企直联API对接，实现甲方自主发起费用结算操作资金经劳务公司账户过账不停留</span>
                        </div>
                        <div class="flex column flex1">
                            <div class="mesIconP">发票管理</div>
                            <span class="flex1">每笔结算自动生成待申请的发票记录甲方可随时在线申请发票</span>
                        </div>
                </div>
                <img src="../assets/index/productPresentation.jpeg" class="aboutUsContLeftP" alt="">
            </div>
            <div class="flex content">
                <img src="../assets/index/productPresentation1.png" class="aboutUsContLeftP1" alt="">
                <div class="flex column flex1" style="padding:20px 20px;font-weight:500;line-height:30px;background: #F5F5F5;margin: 35px 20px 0 20px">
                        <div class="flex  column flex1">
                            <div class="mesIconP">电子合同签署</div>
                            <span class="flex1">在线完成电子合同签署以及个人实名认证电子签具有法律效应，同时更加简单便捷，为企业节省人力成本</span>
                        </div>
                        <div class="flex  column flex1">
                            <div class="mesIconP">项目管理</div>
                            <span class="flex1">查看个人已加入的项目信息</span>
                        </div>
                        <div class="flex column flex1">
                            <div class="mesIconP">客户管理</div>
                            <span class="flex1">支持推广客户，客户洽谈合作后，关联至个人端进行查看管理</span>
                        </div>
                </div>
            </div>
        </div>
            
        <!-- 关于我们 -->
        <div id="aboutUs">
            <div class="title">
                <div><span></span><i></i><h5>关于我们</h5><i></i><span></span></div>
                <span>ABOUT US</span>
            </div>
            <!-- <div class="aboutUsTop"></div> -->
            <div class="content aboutUsCont">
                <div class="flex">
                    <!-- <div class="aboutUsContLeft">
                        <img v-if="logoUrl == ''" class="aboutUsLogo" src="../assets/logo.png" alt="LOGO">
                        <img v-else class="aboutUsLogo" :src="logoUrl" alt="LOGO">
                        <div class="aboutFG"></div>
                        <div class="flex">
                            <div class="aboutUsContLeftHead">01</div>
                            <div>
                                <h6>行业公认专家团队</h6>
                                <span>Industry recognized expert team</span>
                            </div>
                        </div>
                        <div class="aboutFG1"></div>
                        <div class="flex">
                            <div class="aboutUsContLeftHead">02</div>
                            <div>
                                <h6>品牌信誉保障</h6>
                                <span>Brand reputation guarantee</span>
                            </div>
                        </div>
                        <div class="aboutFG1"></div>
                        <div class="flex">
                            <div class="aboutUsContLeftHead">03</div>
                            <div>
                                <h6>国家政策发展支持</h6>
                                <span>National policy development support</span>
                            </div>
                        </div>
                        <div class="aboutFG1"></div>
                    </div> -->
                    <img src="../assets/index/aboutUs.jpeg" class="aboutUsContLeft" alt="">
                    <div class="flex column flex1" style="padding:20px 20px;font-weight:500;line-height:30px;background: #F5F5F5;margin: 35px 0 0 20px">
                        <div class="flex alignCenter ">
                            <div class="mesIcon"></div>
                            <span class="flex1">上海戈金，上海戈金建筑工程有限公司成立于2008年1月，注册于上海市崇明区，注册资金1000万人民币。公司主要服务项目：建设工程施工，建筑劳务分包。工程管理服务，机械设备、金属材料、建筑材料、五金交电、电子专用设备、电力电子元器件的销售。</span>
                        </div>
                        <div class="flex alignCenter ">
                            <div class="mesIcon"></div>
                            <span class="flex1">公司和上海大型建筑类企业如上海建工集团、浦东建设集团；大型全国性的地产集团：上海绿地、广州恒大、龙湖地产等多家建筑业企业合作，深受广大用户和企业的好评！</span>
                        </div>
                        <div class="flex alignCenter ">
                            <div class="mesIcon"></div>
                            <span class="flex1">公司拥有经验丰富的团队，先进的运营理念，人性化管理方式，完善的分包体系，确保资金规范化、安全化。上海戈金建筑工程有限公司愿与各界朋友携手共进，合作共赢，利益共享，共创美好未来！</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            
        <!-- 底部 -->
        <div id="bottom">
            <div class="btmTop">
                <!-- <div>
                    <h6>系统</h6>
                    <span>SAAS系统入驻</span>
                    <span>渠道商系统入驻</span>
                </div> -->
                <!-- <div>
                    <h6>产品</h6>
                    <span>薪酬云</span>
                    <span>薪福通</span>
                    <span>薪计划</span>
                    <span>薪惠融</span>
                </div> -->
                <div>
                    <h6>联系我们</h6>
                    <!-- <span>
                        <i class="el-icon-service"></i>
                        咨询热线：{{phone}}
                    </span>
                    <span>
                        <i class="el-icon-service"></i>
                        客服电话：17317954749
                    </span> -->
                    <span>
                        <i class="el-icon-message"></i>
                        <!-- 客服邮箱：{{email}} -->
                        公司邮箱：Shanghaigejin@yeah.net
                    </span>
                </div>
                <div>
                    <h6>公司地址</h6>
                    <span>
                        <i class="el-icon-location-information"></i>
                        <!-- 公司地址：{{address}} -->
                        公司地址：上海市崇明区东平镇东风公路399号
                    </span>
                </div>
                <!-- <div>
                    <h6>公众号</h6>
                    <img src="../assets/index/gongzhonghao.png" alt="">
                </div> -->
            </div>
            <div class="footer">
                <span>{{companyName}}</span>
                <span>版权所有</span>
                <a class="record" href="http://beian.miit.gov.cn/ ">沪ICP备2022025597号</a>
            </div>
        </div>

        <!-- 回到顶部 -->
        <el-backtop target="#index" :visibility-height="300"></el-backtop>
    </div>
</template>

<script>
import { getBanner , getConfig } from '@/api/index.js'
export default {
    data () {
        return {
            name:'上海戈金',
            activeIndex:'1',
            productIndex:'1',
            proAplIndex:'1',
            advantageIndex:'1',
            companyName:'上海戈金建筑工程有限公司',
            record:'沪ICP备20022174号',
            phone:'400-800-8888',
            email:'17602119988@163.com',
            address:'上海市松江区泗泾镇掌安大厦',
            bannerList:[],
            logoUrl:'',
        };
    },
    created(){
        // this.queryBanner()
        // this.queryConfig()
    },
    methods: {
        // 锚点跳转
        changeHash(idName) {
            // console.log(idName)
            document.querySelector(idName).scrollIntoView(true);
        },
        selItem(remClass,addClass,item,name){
            let domArr = document.querySelectorAll(remClass)
            let num = domArr.length
            for(let i = 0;i<num;i++){
                domArr[i].classList.remove(addClass)
            }
            domArr[Number(item)-1].classList.add(addClass)
            this.$data[name] = item
        },
        // 鼠标划过
        proAppHover(e,item1,item2){
            // console.log('鼠标进入')
            // console.log(e.target)
            let dom = e.target
            let div = document.createElement('div')
            div.style = `display:flex;width:100%;height:100;color:#FFFFFF;position:absolute;top:0;bottom:0;left:0;right:0;align-items:center;justify-content:center;flex-direction:column;background:url(${require('../assets/index/proApplication/app.png')}) 100%`
            let num = arguments.length - 1;
            for(let i = 0;i<num;i++){
                let span = document.createElement('span')
                span.innerHTML = arguments[i+1];
                div.appendChild(span)
            }
            dom.appendChild(div)
        },
        // 鼠标移走
        proAppLeave(e){
            // console.log(e.target.lastChild)
            let dom = e.target
            let childDom = e.target.lastChild
            dom.removeChild(childDom)
        },
        // 获取轮播图
        queryBanner(){
            let _this = this
            getBanner()
            .then(res=>{
                console.log(res)
                if(res.data.resp_code == '000000'){
                    _this.bannerList = []
                    res.data.result.map(item=>{
                        if(item.targetPlatform == '2'){
                            _this.bannerList.push(item)
                        }
                    })
                }
            })
        },
        // 获取系统配置
        queryConfig(){
            let _this = this
            getConfig()
            .then(res=>{
                if(res.data.resp_code == '000000'){
                    _this.companyName = res.data.result.company
                    _this.address = res.data.result.address
                    _this.email = res.data.result.email
                    _this.phone = res.data.result.tel
                    // _this.logoUrl = res.data.result.logo
                }
            })
        },
    }
}

</script>
<style scoped>
#index{
    /* height: 100vh; */
    overflow: auto;
    min-width: 1400px;
}
.top{
    display: flex;
    align-items: center;
    min-width: 1200px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    position: relative;
    z-index: 99;
    height: 65px;
    justify-content: center;
}
#logo{
    width: 51.82px;
    height: 51.82px;
    margin: 0 60px;
}
#logo img{
    width: 100%;
    height: 100%;
}
/* 通用样式 */
.flex{
    display: flex;
}
.flex1{
    flex: 1;
}
.alignCenter{
    align-items: center;
}
.justifyCenter{
    justify-content: center;
}
.jusBetween{
    justify-content: space-between;
}
.boxShadow{
    box-shadow: 0 0 10px 0 rgba(46,145,255,.12);
    border-radius: 8px;
}
.flexRight{
    justify-content: flex-end;
}
.column{
    flex-direction: column;
}
.left{
    text-align: left;
}
.right{
    text-align: right;
}
.color333{
    color: #333333;
}
.color666{
    color: #666666;
}
.theme{
    color: #2E91FF;
}
.themeBg{
    background: #2E91FF;
}
.relative{
    position: relative;
}
.padding20{
    padding: 20px 0;
}
.margin20{
    margin: 20px 0;
}
.borderBtmE9{
    border-bottom: 1px dashed #E9E9E9;
}
/* 导航 */
.nav{
    display: flex;
    height: 100%;
    border-left: 1px solid rgba(255,255,255,0.2);
}
.navItem{
    display: flex;
    align-items: center;
    color: #FFFFFF;
    cursor:pointer;
    height: 100%;
    width: 140px;
    justify-content: center;
    align-items: center;
}
.navItem a{
    color: #FFFFFF;
    font-size: 16px;
    margin-right: 5px;
    text-decoration: none;
}
.navItem:hover{
    background-color: rgba(255,255,255,0.1);
}
.banner{
    position: relative;
    top: -80px;
    z-index: 0;
}
.banner /deep/ .el-carousel__container{
    width: 100%;
    height: 768px!important;
}
.banner img{
    width: 100%;
    height: 100%;
}

/* 每个栏目里面的大标题样式 */
.title{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title>div{
    display: flex;
    align-items: center;
}
.title>div span{
    width: 340.66px;
    height: 1.15px;
}
.title>div span:nth-of-type(1){
    background: linear-gradient(to left,#2E91FF,rgba(46,145,255,.2));
}
.title>div span:nth-of-type(2){
    background: linear-gradient(to right,#2E91FF,rgba(46,145,255,.2));
}
.title>div i{
    width: 15px;
    height: 6px;
    background: #2E91FF;
    margin: 0 16px 0 11px;
}
.title>div h5{
    font-size: 32px;
    font-weight: 600;
}
.title1>div span:nth-of-type(1){
    background: linear-gradient(to left,#FFFFFF,rgba(255,255,255,.2));
}
.title1>div span:nth-of-type(2){
    background: linear-gradient(to right,#FFFFFF,rgba(255,255,255,.2));
}.title1>div i{
    width: 15px;
    height: 6px;
    background: #FFFFFF;
    margin: 0 16px 0 11px;
}
.title1>span{
    font-size: 18px;
    color: #FFFFFF;
}
.title1 h5{
    color: #FFFFFF;
}

/* 带底部Border的小标题样式 */
.headTit{
    font-size: 26px;
    color: #333333;
    font-weight: 600;
    flex-direction: column;
    display: flex;
}
.headTit span{
    width: 103px;
    height: 3px;
    background: #2E91FF;
    border-radius: 1px;
}

/* 固定宽度的模块 */
.content{
    width: 1200px;
    margin: 34px auto 0;
}

/* 消息图标 */
.mesIcon{
    width: 40px;
    height: 40px;
    border-radius: 7.27px;
    /* background-color: #2E91FF; */
    /* background-image: url('../assets/index/mesIcon.png'); */
    background-repeat: no-repeat;
    background-size: 22.61px 22.61px;
    background-position: center;
    margin-right: 13px;
}
.mesIcon1{
    width: 40px;
    height: 40px;
    border-radius: 7.27px;
    background-color: #FFFFFF;
    /* background-image: url('../assets/index/mesIcon1.png'); */
    background-repeat: no-repeat;
    background-size: 22.61px 22.61px;
    background-position: center;
    margin-right: 13px;
}
.mesIcon2{
    width: 40px;
    height: 40px;
    border-radius: 7.27px;
    background-color: #2E91FF;
    background-image: url('../assets/index/mesIcon2.png');
    background-repeat: no-repeat;
    background-size: 22.61px 22.61px;
    background-position: center;
    margin-right: 13px;
}

/* 通用小图标 */
.titIcon{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #2E91FF;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 12px;
}
.titIcon img{
    width: 28px;
    height: 28px;
}

/* tab选项卡 */
.tab{
    border: 1px solid rgba(219,219,219,.44);
    border-radius: 4px;
    display: inline-block;
    align-items: center;
    display: flex;
    overflow: hidden;
}
.tab>div{
    height: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #333333;
    cursor:pointer;
    width: 156px;
    height: 40px;
    font-weight: 500;
}
.tab .isActive{
    background: #2E91FF;
    color: #FFFFFF;
}

/* 市场分析 */
#marketAnalysis{
    height: 1507px;
    background: #FFFFFF;
}
.marketItem1{
    height: 487px;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 53px;
}
.marketItem1:nth-of-type(1){
    width: 760px;
}
.marketItem1:nth-of-type(2){
    width: 420px;
}
.marketDesc{
    padding-left: 54px;
    margin-top: 20px;
}
.marketDesc h6{
    font-size: 22px;
    color: #333333;
    font-weight: 600;
}
.marketMes{
    display: flex;
    flex-direction: column;
    padding: 10px 3px;
    flex: 1;
}
.marketMes img{
    width: 31px;
    height: 24px;
}
#marketAnalysis p{
    font-size: 16px;
    color: #333333;
    font-weight: 500;
    line-height: 22px;
    margin: 14px 0;
    text-indent: 0;
}

.marketItem2{
    height: 363px;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 37px;
}
.marketItem2:nth-of-type(1){
    width: 420px;
}
.marketItem2:nth-of-type(2){
    width: 760px;
}
.marketItem2 img{
    width: 100%;
    margin-top: 31px;
}
.marketItem3 h5{
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}
#marketAnalysis .marketItem3 p{
    margin: 6px 0;
}
.marketItem3Img{
    width: 262px;
    height: 262px;
    margin: 0 34px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.marketItem3Img div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 104px;
    height: 98px;
    background: url('../assets/index/lcIconBg.png') no-repeat;
    background-size: 100% 100%;
    font-size: 20px;
    color: #FFFFFF;
    font-weight: 600;
}
.marketItem3Img img{
    position: absolute;
    /* animation: marketImg 15s linear infinite normal; */
}
@keyframes marketImg {
    0%{
        transform: rotate(0);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

/* 产品介绍 */
#productPresentation{
    /* height: 839px; */
    /* background: #2E91FF; */
    padding: 41px 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.productTab{
    border: 1px solid rgba(255,255,255,.44);
    border-radius: 4px;
    display: flex;
    align-items: center;
    width: 624px;
    height: 40px;
    overflow: hidden;
}
.productTab>div{
    flex: 1;
    height: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    color: rgba(255,255,255,.7);
    cursor:pointer;
}
.productTab .isProActive{
    background: #FFFFFF;
    color: #2E91FF;
}
/* 产品介绍 */
.proTabItem1Top{
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,.26);
    box-shadow: 0 -1px 7px 0 rgba(255,255,255,.17);
    color: #FFFFFF;
    line-height: 36px;
    padding: 20px 23px;
    box-sizing: border-box;
    margin-top: 39px;
    font-size: 18px;
}
.proTabItem1Btm{
    width: 418px;
    margin: 23px auto 0;
}
.proTabItem1Bg{
    width: 156px;
    height: 138px;
    background: url('../assets/index/proItmBg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 24px;
    color: #FFFFFF;
}
.proTabItem1Fg{
    width: 97px;
    height: 1px;
    display: block;
    opacity: 0.65;
}
.proTabItem1BtmFenge>div{
    width: 1px;
    height: 49px;
    margin: 0 78px;
    border-left: 1px dashed rgba(255,255,255,.65);
    box-sizing: border-box;
}
/* 产品优势 */
.proTabItem2{
    margin-top: 116px;
}
.proTabItem2Cent{
    width: 352px;
    height: 352px;
    background: rgba(255,255,255,.17);
    border-radius: 50%;
    position: relative;
}
.proTabItem2Cent i{
    position: absolute;
    width: 282.89px;
    height: 282.89px;
    background: rgba(255,255,255,.22);
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    border-radius: 50%;
}
.proTabItem2Cent i strong:nth-of-type(1){
    content: '';
    position: absolute;
    width: 8.88px;
    height: 8.88px;
    background: #FFFFFF;
    border-radius: 50%;
    left: -4.44px;
    top: 137px;
}
.proTabItem2Cent i strong:nth-of-type(2){
    content: '';
    position: absolute;
    width: 8.88px;
    height: 8.88px;
    background: #FFFFFF;
    border-radius: 50%;
    right: -4.44px;
    top: 137px;
}
.proTabItem2Cent i strong:nth-of-type(3){
    content: '';
    position: absolute;
    width: 8.88px;
    height: 8.88px;
    background: #FFFFFF;
    border-radius: 50%;
    left: 16px;
    top: 71px;
}
.proTabItem2Cent i strong:nth-of-type(4){
    content: '';
    position: absolute;
    width: 8.88px;
    height: 8.88px;
    background: #FFFFFF;
    border-radius: 50%;
    right: 16px;
    top: 71px;
}
.proTabItem2Cent i strong:nth-of-type(5){
    content: '';
    position: absolute;
    width: 8.88px;
    height: 8.88px;
    background: #FFFFFF;
    border-radius: 50%;
    left: 16px;
    top: 209px;
}
.proTabItem2Cent i strong:nth-of-type(6){
    content: '';
    position: absolute;
    width: 8.88px;
    height: 8.88px;
    background: #FFFFFF;
    border-radius: 50%;
    right: 16px;
    top: 209px;
}
.proTabItem2CentC{
    width: 207px;
    height: 207px;
    background: #FFFFFF;
    color: #2E91FF;
    font-size: 40px;
    line-height: 52px;
    font-weight: 600;
    border-radius: 50%;
}
.proTabItem2 img{
    width: 76px;
    height: 76px;
    margin: 0 20px;
}
.proTabItem2>div>div>div{
    background: #FFFFFF;
    border-radius: 8px;
    width: 226.44px;
    padding: 14px 10px;
    position: relative;
    margin: 17px 0;
    height: 70px;
}
.proTabItem2>div>div>div h6{
    font-size: 18.32px;
    font-weight: 500;
}
.proTabItem2>div>div>div p{
    font-size: 14.65px;
    line-height: 21px;
    text-indent: 0;
}
.protabItem2Left>div:nth-of-type(1),.protabItem2Left>div:nth-of-type(3){
    position: relative;
    right: -47px;
}
.protabItem2Right>div:nth-of-type(1),.protabItem2Right>div:nth-of-type(3){
    position: relative;
    left: -47px;
}
.protabItem2Left>div>div::after{
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: 0px;
    height: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #FFFFFF;
}
.protabItem2Right>div>div::after{
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 0px;
    height: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #FFFFFF;
}
/* 业务方案 */
.proTabItem3Top{
    display: flex;
    align-items: center;
    margin-top: 39px;
}
.proTabItem3Top>div:nth-of-type(1),.proTabItem3Top>div:nth-of-type(3),.proTabItem3Top>div:nth-of-type(5){
    width: 156px;
    height: 138px;
    background: url('../assets/index/proItmBg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 24px;
    line-height: 33px;
}
.proTabItem3Top>div:nth-of-type(2),.proTabItem3Top>div:nth-of-type(4){
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
.proTabItem3Top i{
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    position: absolute;
}
.proTI{
    top: -2px;
}
.proBI{
    bottom: -2px;
}
.proTabItem3Top>div>div>div{
    width: 341px;
    height: 1px;
    position: relative;
    margin: 20px 0;
}
.proDashed{
    border-bottom: 1px dashed #FFFFFF;
}
.proSolid{
    border-bottom: 1px solid #FFFFFF;
}
.proToRight::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid #FFFFFF;
    border-bottom: 5px solid transparent;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto ;
}
.proToLeft::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid #FFFFFF;
    border-bottom: 5px solid transparent;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto ;
}
.proTabItem3Btm{
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,.26);
    box-shadow: 0 -1px 7px 0 rgba(255,255,255,.17);
    color: #FFFFFF;
    font-size: 16px;
    margin-top: 103px;
}
.proTabItem3Btm>div{
    margin: 20px;
}
.proTabItem3Btm span{
    flex: 1;
}
/* 业务流程 */
.proTabItem4{
    margin: 40px auto 0;
    width: 1010px;
}
.proTabItem4 img{
    width: 100%;
}

.bowen{
    position: absolute;
    bottom: 0;
    left: -500px;
    right: 0px;
    height: 75.65px;
    animation: waveCircle 7s linear infinite normal ;
}
.bowen1{
    position: absolute;
    bottom: 0;
    left:  0px;
    right: -500px;
    height: 75.65px;
    animation: waveCircle1 9s linear infinite normal ;
}
.bowen img{
    display: block;
    width: 100%;
    height: 100%;
}
.bowen1 img{
    display: block;
    width: 100%;
    height: 100%;
}
@keyframes waveCircle {
    0% {
        left: -500px;
        right: 0;
        opacity: 0;
    }
    5%{
        opacity: 0.5;
    }
    25%{
        opacity: 1;
    }
    50% {
        left: -250px;
        right:-250px;
        opacity: 1;
    }
    75%{
        opacity: 1;
    }
    95%{
        opacity: 0.5;
    }
    100% {
        left: 0px;
        right: -500px;
        opacity: 0;
    }
}
@keyframes waveCircle1 {
    0% {
        left: 0px;
        right: -500px;
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    50% {
        left: -250px;
        right: -250px;
        opacity: 1;
    }
    75%{
        opacity: 1;
    }
    100% {
        left: -500px;
        right: 0px;
        opacity: 0;
    }
}

/* 产品应用 */
#productApplication{
    min-height: 1088px;
    background: #FFFFFF;
    padding-top: 63px;
    box-sizing: border-box;
    padding-bottom: 70px;
}
/* 使用场景 */
.proAltItem1{
    height: 772px;
    margin-top: 30px;
    padding: 20px 10px 0;
    box-sizing: border-box;
}
.proAltItem1 h6{
    font-size: 22px;
    color: #333333;
}
.proAltItem1Hx span{
    width: 260px;
    height: 44px;
    background: #2E91FF;
    border-radius: 4px;
    margin: 20px 14px;
    line-height: 44px;
    text-align: center;
    color: #FFFFFF;
}
.proAltItem1Hx img{
    width: 235px;
    height: 200px;
}
.proAltItem1PT img{
    width: 130px;
    height: 115px;
    display: block;
}
.proAltItem1PT>div{
    margin-left: -18px;
}
.proAltItem1PT>div:nth-of-type(1){
    margin-left: 0;
}
.proAltItem1PT>div>div{
    position: relative;
    margin: 3px 0;
    z-index: 1;
}
/* 政策依据 */
.proAltItem2{
    padding: 20px;
}
.proAltItem2 h5{
    margin: 6px 0;
    font-size: 22px;
}
.proAltItem2 span{
    font-size: 16px;
    line-height: 22px;
    display: flex;
    margin-bottom: 17px;
}
/* 完税凭证 */
.proAltItem3{
    padding: 20px;
}
.proAltItem3>div:nth-of-type(1){
    padding-left: 20px;
}
.proAltItem3>div:nth-of-type(1)>div:nth-of-type(1){
    padding-right: 70px;
}
.proAltItem3>div:last-child{
    display: flex;
    align-items: center;
    flex-direction: column;
    line-height: 22px;
    background: #2E91FF;
    width: 360px;
    height: 56px;
    justify-content: center;
    color: #FFFFFF;
    margin: 30px auto 20px;
    border-radius: 6px;
    font-size: 16px;
}

/* 节税案例 */
#case{
    height: 700px;
    background: #F9F9F9;
    padding: 40px 0;
    box-sizing: border-box;
}
.caseCont>img{
    width: 47px;
    height: 7px;
    display: block;
    margin: 0 7px;
}
.caseCont>div>img{
    width: 145px;
    height: 130px;
    margin-bottom: 40px;
    display: block;
}
.caseCont>div>div{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}
.caseCont>div>div span{
    font-size: 18px;
    color: #333333;
    margin-bottom: 7px;
    margin-top: -20px;
}
.caseCont>div>div i{
    font-style: normal;
    font-size: 14px;
    color: #666666;
}
.caseCont2{
    margin-top: 126px;
}
.caseCont2>div{
    padding-left: 129px;
}
.caseCont2>div>div{
    margin: 40px 0;
}
.caseCont2 h6{
    font-size: 22px;
}
.caseCont2 span{
    font-size: 20px;
}

/* 合作流程 */
#flow{
    height: 903px;
    background: #FFFFFF;
    padding-top: 111px;
    box-sizing: border-box;
}
.flowContItem1 h5{
    font-size: 22px;
    font-weight: 600;
    color: #333333;
    margin: 39px 0 20px;
}
.flowContItem1>div{
    padding-bottom: 177px;
}
.flowContItem1>div>div{
    width: 104px;
    height: 98px;
    font-size: 20px;
    color: #FFFFFF;
    position: relative;
}
.flowContItem1>div>div:nth-of-type(odd){
    background: url('../assets/index/lcIconBg.png') no-repeat 100%;
}
.flowContItem1>div>div:nth-of-type(even){
    background: url('../assets/index/lcIconBg1.png') no-repeat 100%;
}
.flowContItem1>div>div>div{
    position: absolute;
    width: 100%;
    top: 120px;
    color: #333333;
    padding: 8px;
    border-radius: 6px;
    border: 1px dashed #CECECE;
    text-align: center;
}
.flowContItem1>div>div>div i{
    font-style: normal;
    display: block;
    font-size: 15px;
}
.flowContItem1 img{
    width: 47px;
    height: 7px;
    display: block;
    margin: 0 14px;
}
.flowContItem1:nth-of-type(2) img{
    width: 233px;
}

/* 平台优势 */
#advantage{
    height: 639px;
    background: #F9F9F9;
    padding-top: 41px;
    box-sizing: border-box;
}
.advantageItem1{
    padding-top: 74px;
    font-size: 22px;
}
.advantageItem1>img{
    width: 430px;
    height: 260px;
    margin: 0 37px;
}
.advantageItem1 span{
    width: 295px;
    display: block;
    font-size: 16px;
}
.advantageItem1 h6{
    color: #333333;
    font-size: 22px;
}
.advantageItem1>div>div{
    margin-bottom: 42px;
}
/* 资金监管 */
.advantageItem2{
    padding-top: 68px;
}
.advantageItem2Itm>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}
.advantageItem2Itm>div:nth-of-type(1),.advantageItem2Itm>div:nth-of-type(7){
    width: 109px;
    height: 96px;
    background: url('../assets/index/advantage/advantage6.png') no-repeat 100%;
    margin: 0 8px;
}
.advantageItem2Itm>div:nth-of-type(4){
    width: 109px;
    height: 96px;
    background: url('../assets/index/advantage/advantage7.png') no-repeat 100%;
    margin: 0 8px;
}
.advantageItem2Itm>div:nth-of-type(2),.advantageItem2Itm>div:nth-of-type(5){
    width: 146px;
    border-bottom: 1px dashed #2E91FF;
}
.advantageItem2Itm>div:nth-of-type(3),.advantageItem2Itm>div:nth-of-type(6){
    width: 146px;
    border-bottom: 1px dashed #2E91FF;
    position: relative;
}
.advantageItem2Itm>div:nth-of-type(3)::after,.advantageItem2Itm>div:nth-of-type(6)::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid #2E91FF;
    border-bottom: 5px solid transparent;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto ;
}
.advantageItem2 i{
    font-style: normal;
    display: flex;
    width: 120px;
    height: 36px;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 16px;
    background: #2E91FF;
    border-radius: 6px;
}
.advantageItem2 P{
    text-indent: 0;
    font-size: 16px;
    color: #333333;
    font-weight: 500;
}
/* 风险控制、系统高效稳定、高安全性 */
.advantageItem3{
    padding-top: 74px;
    display: flex;
    justify-content: center;
}
.advantageItem3>div{
    width: 300px;
    border-radius: 10px;
    background: #FFFFFF;
    overflow: hidden;
    margin: 0 20px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px 0 rgba(46,145,255,.22);
}
.advantageItem3>div:nth-of-type(1) span{
    background-color: #2E91FF;
}
.advantageItem3>div:nth-of-type(2) span{
    background-color: #F7B500;
}
.advantageItem3>div:nth-of-type(3) span{
    background-color: #E02020;
}
.advantageItem3>div span{
    width: 100%;
    height: 72px;
    line-height: 72px;
    background-image: url('../assets/index/advantage/advantage8.png');
    background-size: 100%;
    text-align: center;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 500;
}
.advantageItem3>div>div{
    padding: 18px 15px;
}
.advantageItem3>div>div p{
    text-indent: 0;
    font-size: 18px;
    line-height: 30px;
    color: #333333;
}

/* 关于我们 */
#aboutUs{
    height: 975px;
    background: #FFFFFF;
    padding-top: 62px;
    box-sizing: border-box;
}
.aboutUsTop{
    height: 240px;
    margin-top: 75px;
    background: linear-gradient(to right,#2E91FF,#0E4A8C);
}
.aboutUsCont{
    position: relative;
    margin-top: 0;
}
.aboutUsCont>img{
    position: absolute;
    width: 865px;
    height: 400px;
    right: -30px;
    top: -357px;
}
.aboutUsContLeft{
    width: 524px;
    /* height: 620px; */
    /* background: url('../assets/index/aboutUs1.png') no-repeat 100%; */
    margin: 136px 0;
    color: #FFFFFF;
}
.aboutUsLogo{
    width: 140px;
    height: 88px;
    margin: 40px auto;
    display: block;
}
.aboutFG{
    width: 245px;
    height: 4px;
    background: rgba(255,255,255,.22);
    margin: 0 auto;
}
.aboutUsContLeftHead{
    width: 76.34px;
    height: 57.25px;
    background: rgba(255,255,255,.17);
    text-align: right;
    font-size: 47.26px;
    line-height: 57.25px;
    margin-right: 16px;
    margin-top: 56px;
    padding-right: 3px;
    box-sizing: border-box;
}
.aboutUsContLeft h6{
    font-size: 18px;
    font-weight: 500;
    margin-top: 53px;
}
.aboutUsContLeft span{
    font-size: 14px;
}
.aboutFG1{
    width: 214.55px;
    height: 1px;
    margin-left: 37px;
    margin-top: 27px;
    background: rgba(255,255,255,.17);
}

/* 底部 */
#bottom{
    height: 300px;
    background: #000000;
    color: #FFFFFF;
    position: relative;
}
.btmTop{
    display: flex;
    padding-top: 57px;
    justify-content: center;
    /* justify-content: space-around; */
}
.btmTop>div{
    margin: 0 100px;
    display: flex;
    flex-direction: column;
    font-size: 16px;
}
.btmTop>div h6{
    font-size: 22px;
    font-weight: 500;
}
.btmTop>div img{
    width: 130px;
    height: 130px;
}
.footer{
    height: 44px;
    text-align: center;
    line-height: 44px;
    color: #FFFFFF;
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 14px;
}
.footer span{
    margin: 0 10px;
}

.mesIconP{
    font-size: 22px;
    font-weight: 500;
    color: #333;
}
.aboutUsContLeftP{
    width: 600px;
    height: 500px;
    margin: 100px 0;
}
.aboutUsContLeftP1{
    width: 500px;
    height: 600px;
    margin: 100px 0;
}
.aboutUsContLeftP img,.aboutUsContLeftP1 img{
    width: 100%;
    height: 100%;
    display: inline-block;
}

.record{
    color: #2E91FF;
}
</style>